<style lang="stylus" scoped>
  .item
    margin-bottom 10px
  .label
    height 14px
    line-height 14px
    font-size 12px
    color #8f96a3
  </style>
  
  <template>
    <div>
      <div class="item" >
        <div class="label">
          页面最大宽度
        </div>
        <v-slider
          v-model="maxContainerWidth"
          :min="500"
          :max="windowWidth - 40"
          :marks="[
            {
              value: appConfigDefault.maxContainerWidth,
              label: '',
            },
          ]"
        />
      </div>
      <div class="item">
        <div class="label">
          界面缩放
        </div>
        <v-slider
          v-model="desktopZoom"
          :min="0.7"
          :max="1.5"
          :marks="[
            {
              value: appConfigDefault.desktopZoom,
              label: '',
            },
          ]"
        />
      </div>
      <div class="item">
        <div class="label">
          皮肤
        </div>
        <v-color-slider
          v-model="transparency"
          :min="0"
          :max="255"
          :marks="[
            {
              value: appConfigDefault.transparency,
              label: '',
            },
          ]"
        />
      </div>
      <div class="item">
        <div class="label">
          标题
        </div>
        <v-switch v-model="itemTitleFlag"/>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { ref, watch } from 'vue'
  import { getAppConfig, getAppConfigDefault, setAppConfigItem,onAppConfigChange } from '@/assets/ts/app-config'
  
  
  export default {
    name: 'SettingsLayout',
    setup() {
      const appConfig = getAppConfig()
      const desktopZoom = ref(appConfig.desktopZoom)
      const transparency = ref(appConfig.transparency)
      const themeBackgroundColor = ref(appConfig.themeBackgroundColor)
      const maxContainerWidth = ref(appConfig.maxContainerWidth)
      const itemTitleFlag = ref(appConfig.itemTitleFlag)
      const windowWidth = window.innerWidth
      const appConfigDefault = getAppConfigDefault()
      watch(maxContainerWidth, (value) => {
        appConfig.maxContainerWidth = value
      })
      watch(desktopZoom, (value) => {
      appConfig.desktopZoom = value
      })
      watch(transparency, (value) => {
        let applyVal = 255-Math.round(value)
        appConfig.transparency = value
        appConfig.themeBackgroundColor =  'rgba('+applyVal+', '+applyVal+', '+applyVal+', 0.7)'
      })
      watch(itemTitleFlag, (value) => {
        appConfig.itemTitleFlag = value
      })
  
      
  
      return {
        appConfigDefault,
        desktopZoom,
        transparency,
        maxContainerWidth,
        windowWidth,
        itemTitleFlag,
      }
    },
  }
  </script>
  